<template>
  <div class="welcome-page">
    <swiper loop auto :list="urlList" :index="urlList_index" @on-index-change="demo06_onIndexChange"  height="300px" ></swiper>
    <div class="text">
      <h3>商城-Demo</h3>
      <h6>男装、女装、童装</h6>
    </div>
    <div class="button">
      <!-- <button class="bg-deep-grey" link="/login">登录</button> -->
      <router-link to="/login" tag="button" class="bg-deep-grey">登录</router-link>
      <router-link to="/register" tag="button" class="bg-orange">注册</router-link>
    </div>
  </div>
</template>
<script>
import {Swiper,Flexbox, FlexboxItem} from 'vux'
const baseList = [{
  url: 'javascript:',
  img: 'https://img.alicdn.com/imgextra/i1/2171367772/TB2ACj0sBsmBKNjSZFFXXcT9VXa_!!2171367772.jpg',
  title: '韩版秋季新款连帽宽松套头长袖卫衣+百搭开叉拼接不规则半身裙女'
}, {
  url: 'javascript:',
  img: 'https://img.alicdn.com/imgextra/i3/2171367772/TB2Ku.2saAoBKNjSZSyXXaHAVXa_!!2171367772.jpg',
  title: '韩Chic早秋新款宽松V领百搭清爽纯色针织简约休闲开衫外套毛衣女'
}, {
  url: 'javascript:',
  img: 'https://img.alicdn.com/imgextra/i2/2171367772/TB2wdgqcuOSBuNjy0FdXXbDnVXa_!!2171367772.png', 
  title: '韩版bf纯色百搭圆领长袖T恤女秋装学生休闲上衣宽松显瘦打底衫潮'
}]

const urlList = baseList.map((item, index) => ({
  url: 'http://m.baidu.com',
  img: item.img,
  fallbackImg: item.fallbackImg,
  title: item.title
}))
export default {
  data(){
    return {
      urlList,
      urlList_index:0
    }
  },
  methods:{
    demo06_onIndexChange (index) {
      this.urlList_index = index
    }
  },
  components:{
    Swiper,Flexbox, FlexboxItem
  }
}
</script>
<style lang="less" scoped>
  .welcome-page{
    .text{
      text-align: center;
      padding: 10vw;
      h6{
        margin-top: 5vw;
        color: #666;
      }
    }
    .button{
      display: flex;
      justify-content: space-around;
      cursor: pointer;
      button{
        padding: 2vw 18vw;
        border: 0;
        border-radius: 1vw;
        color: #fff;
      }
    }
  }
</style>